<template>
  <div class="contact-page">
    <div class="nodata" v-if="contactList.length===0">暂时找不到数据</div>
    <mu-list :dense="true" v-if="contactList.length>0">
      <div class="mulist" v-for="(item,key) in contactList" :key="key">
        <mu-list-item avatar button>
          <mu-list-item-action>
            <mu-avatar color="track">
              <mu-icon value=":iconfont icon-touxiang1"></mu-icon>
            </mu-avatar>
          </mu-list-item-action>
          <mu-list-item-content>
            <mu-list-item-title>{{item.username}}</mu-list-item-title>
            <mu-list-item-sub-title>{{item.iphone}}</mu-list-item-sub-title>
          </mu-list-item-content>
          <mu-list-item-action>
            <mu-button icon color="success" @click="callPhone(item)">
              <mu-icon value=":iconfont icon-phone-channel"></mu-icon>
            </mu-button>
          </mu-list-item-action>
        </mu-list-item>
        <mu-divider></mu-divider>
      </div>
    </mu-list>
    <mu-button color="secondary" fab small class="add-btn" @click="$router.push('add-contact')">
      <mu-icon value=":iconfont icon-jiahao1" size="25"></mu-icon>
    </mu-button>
  </div>
</template>
<script>
export default {
  data () {
    return {
      contactList: []
    };
  },
  created() {
    this.getContactList();
  },
  methods: {
    getContactList() {
      this.$loading('加载中');
      var userInfo = JSON.parse(sessionStorage.getItem('userInfo'));
      this.$api.app.contactList({ page: 1, msisdn: userInfo.msisdn }).then(res => {
        this.contactList = res.result;
        this.$loading.close();
      }).catch((data) => {
        this.$loading.close();
      });
    },
    callPhone(item) {
      this.$getClient((res) => {
        if (res.nextBillingDay === 'downtime') {
          this.$toast.center('当前号码已停机');
        } else {
          if (res.remainingMoney > 0) {
            var userInfo = JSON.parse(sessionStorage.getItem('userInfo'));
            this.$store.dispatch('setTelephone', item.iphone);
            this.$store.dispatch('toggleCallTrue');
            this.$store.dispatch('setDialStatus', 'dial');
            this.$store.dispatch('setCountryName', item.countryId.countryName);
            this.$nexmoApplication.callPhone(item.countryId.dialingPrefix + '-' + item.iphone + '-' + (this.$route.query.msisdn || userInfo.msisdn) + '-' + (this.$route.query.countryCode || userInfo.countryCode));
          } else {
            this.$toast.center('余额不足请及时充值');
          }
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
  .contact-page{
    .sub-title{
      line-height: 1.8;
      background: var(--track-chip);
    }
    .add-btn{
      position: fixed;
      right: 15px;
      bottom: 70px;
    }
  }
</style>
<style lang="less">
  .nodata{
    text-align:center;
    color:#666;
    line-height:60px;
  }
</style>
